<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>z-index</title>

        <style>
            body{
                margin: 0;
                padding: 0;
            }
            .blue{
                border: 10px solid blue;
                width: 120px;
                height: 120px;
                border-radius: 50%;
                position: relative;
                margin: 20px auto auto 100px;
            }
            .black{
                border: 10px solid black;
                width: 120px;
                height: 120px;
                border-radius: 50%;
                position: absolute;
                top: 20px;
                left: 260px;
                z-index: 1;
            }
            .red{
                border: 10px solid red;
                width: 120px;
                height: 120px;
                border-radius: 50%;
                position: absolute;
                top: 20px;
                left: 420px;
                z-index: 9999;
            }
            .yellow{
                border: 10px solid yellow;
                width: 120px;
                height: 120px;
                border-radius: 50%;
                position: absolute;
                top: 85px;
                left: 180px;
                z-index: 0;
            }
            .green{
                border: 10px solid green;
                width: 120px;
                height: 120px;
                border-radius: 50%;
                position: absolute;
                top: 85px;
                left: 340px;
                z-index: 2;
            }
        </style>
    </head>
    <body>
        <div class="blue"></div>
        <div class="black"></div>
        <div class="red"></div>
        <div class="yellow"></div>
        <div class="green"></div>
        <script>
        </script>
    </body>
</html>